<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<%@include file="/views/common/include/taglib.jsp"%>
	<%@include file="/views/common/include/head.jsp"%>
	<title>D 生活</title>
	<link rel="stylesheet" href="${ctx}/css/page/header2.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/reset.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/mallseckill.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/shangchennav.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/footer.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/page.css" type="text/css">
</head>	
	<script type="text/javascript">
    var ctx = '${ctx}';
    var order = "${order}";
	function changeOrder(od,secType){
		if(od == parseInt(order)){
			return;
		}
		
		order = od;
		window.location.href = ctx +"/mallSeckill?pNo=1"+ "&order=" + order + "&secType=" + secType;
	}
	
	function initCommentRate(id,saleRate){
		$("#applauseRate"+id).width(saleRate);
	}

	function changeSecType(secType){
		
		window.location.href = ctx +"/mallSeckill?pNo=1"+ "&order=" + 1 + "&secType=" + secType;
	}
	
	function gotoPage(page){
		
		var pages = $("#pages").val();
		var secType = $("#secType").val();
		var order = $("#order").val();
    	if(page == null || page == 'undefined'){
    		page = this.page;
    	}
    	if(page < 1 ){
    		layer.msg("已到达第一页!", {
				time : 2000
			// 2秒关闭（如果不配置，默认是3秒）
			});
    	} else if(page > pages){
    		layer.msg("已到达最后一页!", {
				time : 1000
			// 2秒关闭（如果不配置，默认是3秒）
			});
    	} else {
    		window.location.href = ctx +"/mallSeckill?pNo=" + page +"&order=" + 1 + "&secType=" + secType;
    	}
	}
	
	function searchGoodsOrShops(){
		var selectType = $("#selectType").val();
		var name = $("#name").val();
		window.location.href = ctx +"/searchGoodsOrShops?pNo=1" + "&selectType=" +selectType +"&name=" + name;
	}
</script>
<body>
    <jsp:include page="/views/common/head_main.jsp" />

	<div class="bg" style="min-height: 690px;">
	<input type="hidden" id="item" value="${sessionScope.item_mall}"/>
		<div class="contentbox1 contentbox">
			<div class="nav">
				 <ul>
                    <li><a href="${ctx}/main?item=4">商城首页</a></li><span>|</span>
                    <li><a style="color:#D4195D;" href="${ctx}/mallSeckill">秒杀专区</a></li><span>|</span>
                    <li><a href="${ctx}/main?item=4#article">精品推荐</a></li><span>|</span>
                    <li><a href="${ctx}/main?item=4#hotshop">热门商铺</a></li><span>|</span>
                    <li><a href="${ctx}/mallIntegral">积分专区</a></li>
                </ul>
				<div class="seabox">
					<select class="searchhh" id="selectType">
					<option value="1">商品</option>
					<option value="2">店铺</option>
					</select>
					<input class="search" type="text" id="name"></input>
					<button class="searchbtn" onclick="searchGoodsOrShops()">搜索</button>
				</div>
				 <div class="cartbox">
                	 <img src="${ctx}/images/mall/cart.png">&nbsp;&nbsp;&nbsp;<a href="${ctx}/shopcart/shopcartList" target="_blank">我的购物车</a>
                </div>
			</div>
		</div>
		<div class="contentbox2 contentbox">
			<img width="1200px" src="${ctx}/images/mall/seckill/seckill_top.png">
		</div>
		<div class="contentbox3 contentbox">
			<div class="hiddenbox">
				<div class="ongoingbox">
					<input id="secType"  type="hidden" value="${secType}">
					<input id="order"  type="hidden" value="${order}">
					<c:if test="${secType == 1}">
						<span  class="ongoing <c:if test="${secType == 1}">selected</c:if>"  onclick="changeSecType(1);"><img src="${ctx}/images/mall/startingOrange.png" /></span>
						<span  class="ongoing <c:if test="${secType == 2}">selected</c:if>" style="margin-right: 30px;"  onclick="changeSecType(2);"><img src="${ctx}/images/mall/startGrey.png" /></span>
					</c:if>
					<c:if test="${secType == 2}">
						<span  class="ongoing <c:if test="${secType == 1}">selected</c:if>"  onclick="changeSecType(1);"><img src="${ctx}/images/mall/startingGrey.png" /></span>
						<span  class="ongoing <c:if test="${secType == 2}">selected</c:if>" style="margin-right: 30px;"  onclick="changeSecType(2);"><img src="${ctx}/images/mall/startOrange.png" /></span>
					</c:if>
				</div>
			</div>
			<div class="item-d-r">
				<div class="wrap-bar">
				<div>
				<input id="secType"  type="hidden" value="${secType}">
				<input id="order"  type="hidden" value="${order}">
				<%-- <span  class="ongoing <c:if test="${secType == 2}">selected</c:if>" onclick="changeSecType(2);" style="cursor: pointer;">即将开始</span>
				<span  class="ongoing <c:if test="${secType == 1}">selected</c:if>" style="margin-right: 10px;cursor: pointer;" onclick="changeSecType(1);">正在开抢</span> --%>
			    </div>
					<!--按销量、价格、评论数排序start  -->
				<div style="height: 31px;border-bottom: 2px solid #89C9D5;width:100%;">
					<div class="rulebox"><img src="${ctx}/images/mall/wenhao.png"><a style="color:#FDAB68; " href="">秒杀规则</a></div>
					<div class="f-sort" style="width:70%;text-align:center;line-height: 30px;font-size: 13px;margin-top:-1px;">
						<a <c:if test="${order == 1}">class="curr"</c:if>  onclick="changeOrder(1,'${secType}')" style="cursor: pointer;">默认</a> 
						<c:if test="${order != 2 && order != 3}">
						<a onclick="changeOrder(2,'${secType}')" style="cursor: pointer;margin-left:-1px;">销量</a>
						</c:if>
						<c:if test="${order == 2}">
						<a <c:if test="${order == 2}">class="curr up"</c:if>  onclick="changeOrder(3,'${secType}')" style="cursor: pointer;margin-left:-1px;">销量&#8593;
						 </a> 
						 </c:if>
						 <c:if test="${order == 3}">
						 <a <c:if test="${order == 3}">class="curr down"</c:if>  onclick="changeOrder(2,'${secType}')" style="cursor: pointer;margin-left:-1px;">销量&#8595;
						 </a> 
						 </c:if>
						<c:if test="${order != 4 && order != 5}">
						<a onclick="changeOrder(4,'${secType}')" style="cursor: pointer;margin-left:-1px;">价格</a>
						</c:if>
						<c:if test="${order == 4}">
						<a <c:if test="${order == 4}">class="curr up"</c:if>  onclick="changeOrder(5,'${secType}')" style="cursor: pointer;margin-left:-1px;">价格&#8593;
						 </a> 
						 </c:if>
						 <c:if test="${order == 5}">
						 <a <c:if test="${order == 5}">class="curr down"</c:if>  onclick="changeOrder(4,'${secType}')" style="cursor: pointer;margin-left:-1px;">价格&#8595;
						 </a> 
						 </c:if>
					</div>
				</div>

				<!--按销量、价格、评论数排序end  -->
					<!-- <ul>
						<li ><a href="" class="selected">默认</a></li>
						<li><a href="">销量</a></li>
						<li><a href="">价格</a></li>
					</ul> -->
				</div>
				<div class="wrap-details">
					<div class="item-attribute">
						<div class="padd">
							<c:forEach items="${seckillGoods.list}" var="item" varStatus="status">
								<div style="float:left;padding:15px;height:100px;width:30%;">
								    <div style="float:left;padding-right:15px;">
								    	<a href="${ctx}/GoodsDetail?id=${item.id}&type=3" target="_blank">
								    	<img width="100" height="100" src="${sessionScope.image_logo}${item.logo}"></a>
								    </div>
								    <div style="float:left;font-size: 10px;color:#959191;width: 174px;">
								    	<div>${item.name}</div>
								    	<div style="text-decoration:line-through; padding: 5px 0px;">￥${item.marketPrice}</div>
								    	<div>
								    		<span style="color:#EA791B;font-size:20px;">￥${item.price}</span>
								    		<c:if test="${secType != 2 && item.stock != 0}">
								    			<span style="background-color: #FEAB69;float:right;border-radius:5px;padding:5px 12px;color:#fff;cursor: pointer;">
								    			<a style="color: #fff;" href="${ctx}/GoodsDetail?id=${item.id}&type=3" target="_blank">立即抢购</a></span>
								    		</c:if>
								    		<c:if test="${secType != 2 && item.stock == 0}">
								    			<span style="background-color: #BFBFBF;float:right;border-radius:5px;padding:5px 17px;color:#fff;">已抢光</span>
								    		</c:if>
								    		<c:if test="${secType == 2}">
								    			<span style="background-color: #BFBFBF;float:right;border-radius:5px;padding:5px 12px;color:#fff;">即将开始</span>
								    		</c:if>
								    	</div>
								    	<div style="padding:10px 0px;">
								    	<span style="float:right;">${item.sales}人已抢</span>
								    	<span>已抢${item.saleRate}%</span>
								    	</div>
								    	<%-- <div class="percent">
									    	<span>(${item.saleRate}%)</span>
									    	<div id="applauseRate${item.id}" onchange="initCommentRate('${item.id}','${item.saleRate}');" style="width: 100%;"></div>
								    	</div> --%>
								    </div>
							    </div>
								<c:if test="${status.count%3==0}">
								<br>
								</c:if>
							</c:forEach>
						</div>
					</div>
						<div style="background-color: #fff;height: 80px;">
						<table width="100%">
						<tfoot>
		            	<tr>
			               <td colspan="7">
			               
			               		<div class="page">
									<input id="pages" type="hidden" value="${seckillGoods.pages}">
									<ul>
										<li><a class="last-page page-change " onclick="gotoPage(${currentPage-1 });">&lt;上一页</a></li>
										<c:if test="${seckillGoods.firstPage > 1}">
											<li onclick="gotoPage(1);"
												class="page-num"><a>1</a></li>
											<c:if test="${seckillGoods.firstPage > 2}">
				                       		...
				                       		</c:if>
										</c:if>
										<c:forEach items="${seckillGoods.navigatepageNums }" var="page">
											<li onclick="gotoPage(${page });"
												class="<c:if test="${currentPage == page }">current</c:if>"
												class="page-num"><a>${page}</a></li>
										</c:forEach>
										<c:if test="${seckillGoods.lastPage < seckillGoods.pages}">
											<c:if test="${seckillGoods.firstPage < seckillGoods.pages - 1}">
				                       		...
				                       		</c:if>
											<li onclick="gotoPage(${seckillGoods.pages});"
												class="page-num"><a>${seckillGoods.pages}</a>
											</li>
										</c:if>
										<li><a class="next-page page-change" onclick="gotoPage(${currentPage+1 });">下一页&gt;</a></li>
									</ul>
								</div>
			               
			               
			               
			               
			               
			               
			               
			                  <%-- <div>
			                    <div style="float:left;padding-left:30px;color:#959191;">
			                      <span class="total">合计 ${seckillGoods.total} 条数据</span>               
			                    </div>
			                    <div style="float:right;width:20%;"> 
				                  <div style="float:left;">                 
				                      <ul class="footer_ul">
				                      	<c:if test="${seckillGoods.hasPreviousPage }">
				                        <li onclick="gotoPage(${currentPage-1 });" style="width:55px;cursor: pointer;"><span class="leftRight" >&lt;上一页</sapn></li>
				                      	</c:if>
				                        <c:if test="${seckillGoods.firstPage > 1}">
				                        	<li onclick="gotoPage(1);" style="width:24px;text-align: center;cursor: pointer;">
				                             	<span>1</span>
				                        	</li>
				                        	<c:if test="${seckillGoods.firstPage > 2}">
				                        		...
				                        	</c:if>
				                      	</c:if>
				                        <c:forEach items="${seckillGoods.navigatepageNums }" var="page">
				                        <li onclick="gotoPage(${page });" class="<c:if test="${currentPage == page }">active</c:if>" style="cursor: pointer;border: 1px solid #9A9A9A;width:24px;text-align: center;">
				                            <span> ${page}</span>
				                        </li>
				                        </c:forEach>
				                        <c:if test="${seckillGoods.lastPage < seckillGoods.pages}">
				                        	<c:if test="${seckillGoods.firstPage < seckillGoods.pages - 1}">
				                        		...
				                        	</c:if>
				                        	<li onclick="gotoPage(${seckillGoods.pages});" style="cursor: pointer;border: 1px solid #9A9A9A;width:24px;text-align: center;">
				                             	<span>${seckillGoods.pages}</span>
				                        	</li>
				                      	</c:if>
				                        <c:if test="${seckillGoods.hasNextPage }">
				                        <li style="width:55px;cursor: pointer;"><span onclick="gotoPage(${currentPage+1});" class="leftRight" >下一页&gt;</span></li>
				                      	</c:if>
				                      </ul>
			                     </div>
		                   		<div style="float:left;  height: 30px;">
									<span style="color: #9A9A9A;">跳转到</span> 
									<input class="inputclass" id="pageNo" onkeydown="if(event.keyCode==13){event.keyCode=0;return false;}" type="text" value="${currentPage }" style="width:22px;height:20px;text-align: center;">
									<span style="color: #9A9A9A;">页</span> 
									<span class="buttonclass" id="J_JumpTo" onclick="gotoCellInfoPage(null);"><a>GO</a></span>
								</div>
			                 </div>
			                 </div> --%>
							</td>
						</tr>
					</tfoot>
					</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="/views/common/footer.jsp" />
	</body>
	</html>